<template>
      <div>
        <Navbar />
        <!-- 用v-if -->
        <!-- <Home v-if="which==='首页'"/>
        <List v-else-if="which==='列表'"/>
        <Center v-else/> -->

        <!-- 用内置动态组件，如果加上KeepAlive则有缓存，也就是当页面切换回来时还保持原来数据，如input中已输入的数据等。 -->
        <keep-alive>
           <component :is="which"></component>
        </keep-alive>


        <!-- 用 <KeepAlive> 也可以-->
            <!-- 如果想要某些组件不缓存，某些要缓存，就加上include,后面跟组件名，但这个组件名称不是注册的名称，要用name命名
            也可以加exclude是不包含的意思。 -->
        <Tabbar/>
    </div>
</template>

<script>

// 在切换时创建新的组件实例通常是有意义的，但在这个例子中，我们的确想要组件能在被“切走”的时候保留它们的状态。
// 要解决这个问题，我们可以用``内置组件将这些动态组件包装起来:

// <!--非活跃的组件将会被缓存!
  /*  <KeepAlive>
 <component :is="activecomponent"</KeepAlive>
<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
    <component :is="view" />
</KeepA1ive>
<!-- 正则表达式(需使用`v-bind`)-->
<KeepAlive :include="/a|b/">
    <component :is="'view" />
</KeepAlive>
<!--数组(需使用'v-bind`)-->
<KeepAlive :include="['a', 'b']">
    <component :is="'view" />
</KeepAlive> */
import Navbar from './Navbar.vue'
import Tabbar from './Tabbar.vue'
import store from './store'
import Center from './views/Center.vue'
import Home from './views/Home.vue'
import List from './views/List.vue'

export default {
    data(){
        return{
            navTitle:'首页',
            // which:'首页'
            which:'Home'
        }
    },
    // provide 跨级通信
    // 1. 父组件中使用provide来提供变量，然后在子组件中通过inject来注入变量。
    // 2. provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
   //下面代码向外暴露了navTitle,在需要用的组件中通过inject来注入变量,在Navbar和Tabbar中都可使用
    provide(){
        return{
            navTitle:this.navTitle,
            // 为了响应数据的变化，我们还需要将这个属性变为可监听的
            // app:this,这里的app也可以写成abc,随意
            app:this
        }
    },
    mounted(){
        var obj={
            "首页":"Home",
            "列表":"List",
            "我的":"Center"
        }
        store.subscribe((value)=>{
            // v-if
            this.which=value
            // 动态组件
            this.which=obj[value]
        })
    },
   
    components:{
        Navbar,
        Tabbar,
        Center,
        List,
        Home
    }
}
</script>





<style>
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}


</style>

